<template>
	<view>
		<carHeader :title="'评价管理'"></carHeader>
		<view class="message" v-for="item in userList" :key="item.index">
			<view class="meHead">
				{{item.user.userName}}
				<!-- #ifndef MP-WEIXIN -->
				<view class="meButton" @click="navigateToDetail(item)">
					查看详情
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="meButton" @tap="getDetails" :data-item="item.orderDetailsId">
					查看详情
				</view>
				<!-- #endif -->
			</view>
			<view class="meBody">
				<p class="orderNum">订单编号：{{item.orderDetailsId}}</p>
				<p class="socre"><span>综合评分：{{item.starRating}}分</span>
					<view class="star" v-for="(i,index) in item.starRating" :key="i.index">
						<u-icon name="star-fill" color="#ffc100">
						</u-icon>
					</view>
				</p>
				<p class="time">评价时间：{{item.evaluationTime}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList: []
			};
		},
		methods:{
			getDetails(obj) {
				// console.log(obj);
			    const id = obj.orderDetailsId ? obj.orderDetailsId : ''; // 确保 riId 存在
				// const id = obj.orderDetailsId;
				// console.log(id);
			    const data = encodeURIComponent(JSON.stringify(obj)); // 其他数据	
			    const url = `/pages/successOrder/successOrder?id=${encodeURIComponent(id)}&data=${data}`;
			    uni.navigateTo({  
			        url: url  
			    });  
			},
			
			// #ifdef MP-WEIXIN
			getDetails(data1){
				console.log(data1);
				//id
				const id = data1.currentTarget.dataset.item; // 确保 riId 存在
				console.log(id);
				// const data = encodeURIComponent(JSON.stringify(obj)); // 其他数据	
				// const url = `/pages/successOrder/successOrder?id=${encodeURIComponent(id)}&data=${data}`;
				uni.navigateTo({  
				    url: '/pages/successOrder/successOrder?id='+ id
				});
			}
			// #endif 
		},
		onShow() {
			uni.request({
				url:"http://localhost:8080/carShop/carShop/orderEvaluation/list",
				success:(res) =>{
					console.log(res.data);
					this.userList=res.data
				}
			})
		},
	}
</script>

<style lang="scss">
	.message {
		background-color: #fff;
		margin: 30rpx 20rpx;
		padding: 30rpx;
		border-radius: 30rpx;
		position: relative;
		top: -280rpx;

		.meHead {
			font-size: 36rpx;
			padding-bottom: 15rpx;
			border-bottom: 5rpx solid #f7f7f7;

			.meButton {
				display: inline-block;
				position: relative;
				left: 350rpx;
				background-color: #0863e7;
				border-radius: 50rpx;
				width: 200rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				color: #FFF;
			}
		}

		.meBody {
			margin-top: 20rpx;

			.orderNum {
				color: #3f89fa;
				margin-bottom: 10rpx;
			}

			.socre {
				margin-bottom: 10rpx;

				span {
					margin-right: 20rpx;
				}

				.star {
					display: inline-block;
				}
			}

			.time {
				color: #858585;
			}
		}
	}
</style>